<template>
  <div class="play-ball">
    canvas运动的小球
    <van-button type="success" @click="startPaly"> 开始运动</van-button>
    <canvas
      ref="canvas"
      :width="PlayBall.CANVAS_WIDTH"
      :height="PlayBall.CANVAS_HEIGHT"
    ></canvas>
  </div>
</template>

<script lang="ts" setup name="PlayBall">
import { ref, onMounted, computed } from 'vue'
import PlayBall from './'
const canvas = ref<HTMLCanvasElement>()
const playBall = computed(
  () =>
    new PlayBall({
      r: 30,
      ctx: canvas.value!,
    })
)

const startPaly = () => {
  window.requestAnimationFrame(() => {
    playBall.value.clearCanvas()
    playBall.value.drawInitCircle()
    playBall.value.moveBall()
    startPaly()
  })
}
onMounted(() => {
  playBall.value.drawInitCircle()
})
</script>
<!-- 
<style lang="scss" scoped>
.playackground: #ccc;
b-ball {
  canvas {
    margin-top: 30px;
    border: 1px solid #000;
    background: #ccc;
  }
}
</style> -->
